<template>
  <div class="system-roles-container">
    <el-card shadow="hover">
      <el-row>
        <el-col class="mb15" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-button size="small" type="primary">
            <el-icon>
              <elementPlus />
            </el-icon>
            新增
          </el-button>
          <el-button size="small" type="danger" class="ml10">
            <el-icon>
              <elementDelete />
            </el-icon>
            批量删除
          </el-button>
        </el-col>
        <el-col class="form-tool-right mb15" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input
            size="small"
            placeholder="请输入用户名"
            style="max-width: 180px"
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <elementSearch />
              </el-icon>
            </template>
          </el-input>
          <el-button size="small" type="primary" class="ml10">查询</el-button>
        </el-col>
      </el-row>
      <el-table :data="state.tableData.data" stripe style="width: 100%">
        <el-table-column prop="num" label="ID" show-overflow-tooltip></el-table-column>
        <el-table-column prop="btnCode" label="按钮代码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="btnName" label="按钮名称" show-overflow-tooltip></el-table-column>
        <el-table-column
          prop="updateDateTime"
          label="更新时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="path" label="操作" width="90">
          <template #default="scope">
            <el-button size="mini" type="text" @click="onAuthSetingsClick()">修改</el-button>
            <el-button size="mini" type="text" @click="onRowDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-if="state.tableData.total > 0"
        :total="state.tableData.total"
        :page="state.tableData.param.pageNum"
        :limit="state.tableData.param.pageSize"
        @onPageChange="onPageChange"
      />
    </el-card>
  </div>
  <AuthSetttings ref="authSetttingsRef" />
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import Pagination from '@/components/Pagination.vue';
import AuthSetttings from '@/views/system/roles/authSetttings.vue';
const state: any = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});
// 初始化表格数据 
const initTableData = () => {
	const data: Array<object> = [
		{
			num: '0001',
			btnCode: 'btn.add',
			btnName: '新增',
			updateDateTime: new Date().toLocaleString()
		},
		{
			num: '0002',
			btnCode: 'btn.del',
			btnName: '删除',
			updateDateTime: new Date().toLocaleString()
		},
    {
			num: '0003',
			btnCode: 'btn.edit',
			btnName: '编辑',
			updateDateTime: new Date().toLocaleString()
		},
    {
			num: '0004',
			btnCode: 'btn.link',
			btnName: '跳转',
			updateDateTime: new Date().toLocaleString()
		},
	];
	state.tableData.data = data;
	state.tableData.total = state.tableData.data.length;
};
// 当前行删除
const onRowDel = (row: object) => {};
// 分页改变
const onPageChange = (page: number, limit: number) => {
	state.tableData.param.pageNum = page;
	state.tableData.param.pageSize = limit;
};
const onAuthSetingsClick = () => {};
// 页面加载时
onMounted(() => {
	initTableData();
});
</script>

<style scoped lang="scss">
.system-roles-container {
	.system-user-photo {
		width: 40px;
		height: 40px;
		border-radius: 100%;
	}
	.system-user-tag {
		margin: 0 5px;
	}
}
</style>
